<template>
  <view class="today-wrapper">
    <view v-if="xzInfo" class="top">
      <view class="title-name">
        <image
            class="status-icon-1"
            src="https://ai-sbbs.xyz/api/profile/upload/2024/07/07/1471ef6a98cb4ce2935c5478fd7286f6.png"
        />

        <image
            v-if="xzInfo['今日运势'] && xzInfo['今日运势']['综合分数']> 80"
            class="status-icon"
            mode="scaleToFill"
            src="../../static/imgs/好@2x.png"
        />

        <image
            v-if="xzInfo['今日运势'] && (xzInfo['今日运势']['综合分数'] <=  80 && xzInfo['今日运势']['综合分数'] >=  60)"
            class="status-icon"
            mode="scaleToFill"
            src="../../static/imgs/中@2x.png"
        />

        <image
            v-if="xzInfo['今日运势'] && xzInfo['今日运势']['综合分数']< 60"
            class="status-icon"
            mode="scaleToFill"
            src="../../static/imgs/差@2x.png"
        />
      </view>
      <view class="good-bad">
        <view class="good-wrapper">
          <view class="text">宜</view>
          <view class="text-desc">
            <tui-row class="demo-uni-row">
              <tui-col
                  v-for="(ls,index) in goodList"
                  :key="index"
                  :span="8"
                  style="margin-bottom:12px"
              >{{ ls }}
              </tui-col>
            </tui-row>
          </view>
        </view>
        <view class="good-wrapper">
          <view class="text text-bad">忌</view>
          <view class="text-desc">
            <tui-row class="demo-uni-row">
              <tui-col
                  v-for="(ls,index) in badList"
                  :key="index"
                  :span="8"
                  style="margin-bottom:12px"
              >{{ ls }}
              </tui-col>
            </tui-row>
          </view>
        </view>
      </view>
      <view class="btn-wrapper" v-if="isShowMsg == 'Y'">
        <tui-form-button
            background="rgb(230, 162, 60)"
            height="40px"
            preventClick
            width="80px"
            @click="getTodayInfo"
        >每日一卦
        </tui-form-button>
      </view>
      <view class="today-start" v-if="isShowMsg == 'Y'">
        <view class="title-2">今日指数</view>
        <view class="col-text">
          <tui-row :gutter="gutter">
            <tui-col :span="24">
              <view style="margin-bottom:4px">
                爱情
                <tui-progress :percent="xzInfo['今日运势']['爱情分数']" activeColor="pink" show-info></tui-progress>
              </view>
            </tui-col>

            <tui-col :span="24">
              <view style="margin-bottom:4px">
                事业
                <tui-progress :percent="xzInfo['今日运势']['事业分数']" activeColor="#f30" show-info></tui-progress>
              </view>
            </tui-col>

            <tui-col :span="24">
              <view style="margin-bottom:4px">
                心情
                <tui-progress :percent="xzInfo['今日运势']['心情分数']" show-info></tui-progress>
              </view>
            </tui-col>

            <tui-col :span="24">
              <view style="margin-bottom:4px">
                交际
                <tui-progress :percent="xzInfo['今日运势']['交际分数']" activeColor="#ab7ef8" show-info></tui-progress>
              </view>
            </tui-col>

            <tui-col :span="24">
              <view style="margin-bottom:4px">
                财富
                <tui-progress :percent="xzInfo['今日运势']['财富分数']" activeColor="#E6A23C" show-info></tui-progress>
              </view>
            </tui-col>

            <tui-col :span="24" style="margin-bottom:16px">
              <view style="margin-bottom:4px">
                健康
                <tui-progress :percent="xzInfo['今日运势']['健康分数']" activeColor="#67c23A" show-info></tui-progress>
              </view>
            </tui-col>
          </tui-row>
        </view>
      </view>
      <wannianliVue v-else/>

      <JuanZou ref="juanZou"/>

    </view>

    <view class="tips-msg" v-else>
      <image src="https://www.ai-sbbs.xyz/logo.png" class="logo"></image>
      <view style="margin-top: 20rpx">
        请先登录查看完整信息
      </view>
      <tui-form-button
          background="rgb(230, 162, 60)"
          height="40px"
          preventClick
          width="80px"
          @click="toLogin"
          class="tips-btn"
          style=" margin: 20rpx auto;
      display: block;"
      >去登录
      </tui-form-button>

    </view>

    <tui-landscape :show="show" iconLeft="50rpx" iconRight="50rpx" @close="close">
      <view class="today-do">
        <view v-for="ls in todoList" :key="ls.id" class="do-item">
          <view class="title">{{ ls.title }}</view>
          <view class="desc">{{ ls.desc }}</view>
        </view>
      </view>
    </tui-landscape>

    <tui-toast ref="toast"></tui-toast>

    <verificationPopup/>
  </view>
</template>

<script>
import {yfgmeiriApi} from "@/apis/qiuqian.js";
import {commonStorage, getNowFormatDate} from "@/utils/common.js";
import {loginWechatApi} from "@/apis/user";

import {yfgLaohuangliApi, yfgyunshiApi} from "@/apis/qiuqian";
import shareSdk from '@/utils/share.js'
import JuanZou from "./components/juanZou.vue";
import showPage from '@/utils/showPage'
import wannianliVue from "../wannianli/wannianli.vue";
import verificationPopup from "@/components/verificationPopup/index.vue";

export default {
  components: {wannianliVue, JuanZou,verificationPopup},
  mixins: [shareSdk, showPage],

  data() {
    return {
      badList: [],
      goodList: [],
      todoList: [],
      userInfo: {},
      gutter: 24,
      xzInfo: null,
      currentStatus: null,
      pageInfo: null,
      show: false,
      mobile: '',
      isLogin: false
    };
  },
  async onShow() {
    let mobile = commonStorage.getStorageSync("mobile");
    if (!mobile) {
      const userInfo = commonStorage.getStorageSync("userInfo");
      if (userInfo) {
        mobile = JSON.parse(userInfo).mobile || '';

      }

    }
    let {code, data} = await loginWechatApi({
      mobile: mobile
    });
    if (code == 1) {
      commonStorage.setStorage("token", data.token);
      commonStorage.setStorage("userInfo", JSON.stringify(data.userVO));
      this.isLogin = false

      this.currentStatus = commonStorage.getStorageSync("currentStatus");
      const userVO = data.userVO
      if (!userVO.birthDate || !userVO.nickName || !userVO.birthPlace ){
        uni.showToast({
          title: '请先去我的页面完善个人信息',
          icon: 'none'
        })
      }

      // this.pageInfo = this.$route.query || '';
      await this.initUserInfo();
      await this.wanninli();
      await this.getxzInfo();
    } else {
      this.isLogin = true
    }



    // this.getTodayInfo();
  },

  methods: {
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    async getxzInfo() {
      if (this.userInfo.constellation == null) {
        let params = {
          title: "请先去我的页面完善个人信息"
        };
        return this.$refs.toast && this.$refs.toast.show(params);
      } else {
        let {code, data} = await yfgyunshiApi({
          type: 0,
          title_yunshi: this.userInfo.constellation
        });
        if (code == 1) {
          this.xzInfo = data;
        }
      }
    },
    async wanninli() {
      let title_laohuangli = getNowFormatDate(0);
      let {code, data} = await yfgLaohuangliApi({
        title_laohuangli: title_laohuangli
      });

      if (code == 1) {
        this.goodList = data.yi.split(" ");
        this.badList = data.ji.split(" ");
      }
    },

    initUserInfo() {
      let userInfo =
          commonStorage.getStorageSync("userInfo") &&
          JSON.parse(commonStorage.getStorageSync("userInfo"));
      if (userInfo) {
        this.userInfo = userInfo;
      }
    },
    close() {
      this.show = false;
    },
    async getTodayInfo() {
      // this.show = true;
      let {code, data} = await yfgmeiriApi(this.userInfo.userId);
      if (code == 1) {
        let arr = [];
        let reader = data.description;

        let keys = Object.keys(reader);

        keys.forEach((item, index) => {
          arr.push({
            id: index,
            title: item,
            desc: reader[item]
          });
        });
        this.todoList = arr;
        this.$refs.juanZou.openModal(data.guaming, arr)
      }
    },
    handerClick(item) {
      uni.navigateTo({
        url: "/pages/record/qiuqian"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.today-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  // padding: 12px;
  // background: #f6f6f6;
  color: #666666;
  font-size: 14px;
  padding-bottom: 150rpx;
  background-image: url(https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png);
  background-size: cover;
  background-repeat: no-repeat;

  .tips-msg {
     display: flex;
     //align-items: center;
     //justify-content: center;
     flex-direction: column;
    min-height: 100vh;
    text-align: center;
    font-size: 30rpx;

    .logo {
      width: 100%;
      height: 300px;
      display: block;
    }

    .tips-btn {
      margin: 20rpx auto;
      display: block;
    }
  }

  .today-do {
    font-size: 10px;
    line-height: 16px;
    column-count: 2;
    column-gap: 0;
    color: #fff;
    position: relative;
    z-index: 777;
    width: 120%;

    .do-item {
      margin-bottom: 12px;
      padding-right: 24px;
    }

    .title {
      font-size: 12px;
      color: #c09351;
      height: 24px;
    }
  }

  .top {
    position: relative;
    padding: 0 12px;
    margin-bottom: 12px;

    .title-name {
      color: #c09351;
      font-size: 16px;
      display: flex;
      justify-content: center;
      overflow: hidden;
      height: 120px;
      position: relative;

      .status-icon-1 {
        display: inline-block;
        width: 210px;
        height: 210px;
        animation: rotate 20s linear infinite;
      }

      @keyframes rotate {
        0% {
          transform: rotate(0);
        }

        25% {
          transform: rotate(90deg);
        }

        50% {
          transform: rotate(180deg);
        }

        75% {
          transform: rotate(270deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      .status-icon {
        position: absolute;
        top: 43px;
        width: 72px;
        height: 100px;
      }

      .status-gif {
        position: absolute;
        opacity: 0.5;
      }
    }

    .good-bad {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;

      .good-wrapper {
        display: flex;

        .text {
          width: 18px;
          height: 18px;
          text-align: center;
          line-height: 18px;
          border-radius: 50%;
          background: #1bab4d;
          font-size: 12px;
          color: #fff;
          margin-right: 10px;

          &.text-bad {
            background: #d11a2d;
          }
        }

        .text-desc {
          width: 88px;
          font-size: 12px;

          :deep(.uni-col) {
            margin-bottom: 16px;
          }
        }
      }
    }

    .btn-wrapper {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }

    .today-start {
      background: #fff;
      border-radius: 8px;
      padding: 20px 0 20px 20px;
      margin-top: 10px;

      .title-2 {
        margin-bottom: 20px;
        font-size: 18px;
      }

      .col-text {
        padding: 0 16px;
      }

      :deep(.tui-col) {
        margin-bottom: 10px;
      }

      .col-wrapper {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
